<template>
    <Layout :items="['管理系统','密码管理']">
        <el-row>
            <el-col :span="12">
                <el-form  label-width="80px" :model="passwordForm" ref="passwordRef" :rules="rules">
                    <el-form-item label="旧密码"  prop="password">
                        <el-input typr="password" v-model="passwordForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newpassword">
                        <el-input typr="password" v-model="passwordForm.newpassword" ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="repassword">
                        <el-input typr="password" v-model="passwordForm.repassword">
                    </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmit">修改</el-button> 
                        <el-button type="warning" @click="clear">重置</el-button>
                    </el-form-item>
                    
                </el-form>
            </el-col>
        </el-row>
    </Layout>

    
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import {password as change} from "../api/api"
/* import { ElMessage } from 'element-plus'; */

const passwordForm = reactive(
    {
        password: "",
        newpassword: "",
        repassword: "",

    }
)
const passwordRef = ref<FormInstance>()
const check1 = (rule: any, value: any, cb: any) => {
    let reg=/^[0-9a-z]{6,}$/
    if(reg.test(value)){
        cb();
    }else{
        cb(new Error("密码必须由6位以上数字字母组成"));
    }
}
const check2 = (rule: any, value: any, cb: any) => {
    if(passwordForm.newpassword===value)
    {
        cb()
    }else{
        cb(new Error("两次密码的输入必须保持一致"))
    }
}

/* const rules = reactive<FormRules>({
  pass: [{ validator: password, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
}) */
const rules:FormRules={
    password:{required:true,message:'请输入用户名',trigger:"blur"},
    newpassword:[{required:true,message:'请输入用户名',trigger:"blur",},{validator:check1,trigger:"blur",}],
    repassword:[{required:true,message:'请输入用户名',trigger:"blur",},{validator:check2,trigger:"blur",}]

};

const handleSubmit=()=>{
    passwordRef.value?.validate(async (val)=>{
        if(val){
            const res=await change(passwordForm);
            console.log(res);
            if(res.data.data.code===10000){
                    ElMessage.success("修改成功");
                    passwordRef.value?.resetFields()
            }else{
                ElMessage.error("修改失败")
            }

        }
})}
const clear=()=>{
    passwordRef.value?.resetFields();
}


</script>
<style scoped>
.el-breadcrumb {
    height: 30px;
    line-height: 30px;
}
</style>